<template>
    <div id="rose-chart">
      <div class="rose-chart-title">区域能源分布</div>
      <div style="text-align: center;"> <p>海王星</p> </div>
      <dv-charts :option="option" class="pie" />
    </div>
  </template>
  
  <script>
  export default {
    name: 'cards',
    data () {
      return {
        option: {}
      }
    },
    methods: {
      createData () {
        const { randomExtend } = this
  
        this.option = {
          series: [
            {
              type: 'pie',
              radius: '60%',
              roseSort: false,
              data: [
                { name: '水', value: randomExtend(40, 70) },
                { name: '电', value: randomExtend(20, 30) },
                { name: '气', value: randomExtend(10, 50) },
              ],
              insideLabel: {
                show: false
              },
              outsideLabel: {
                formatter: '{name} {percent}%',
                labelLineEndLength: 20,
                style: {
                  fill: '#fff'
                },
                labelLineStyle: {
                  stroke: '#fff'
                }
              },
              roseType: true
            }
          ],
          color: ['#871F78','#215E21', '#D8D8BF']
        }
        
      },
      randomExtend (minNum, maxNum) {
        if (arguments.length === 1) {
          return parseInt(Math.random() * minNum + 1, 10)
        } else {
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
        }
      }
    },
    mounted () {
      const { createData } = this
  
      createData()
  
      setInterval(createData, 30000)
    }
  }
  </script>
  
  <style lang="less">
  #rose-chart {
    width: 30%;
    height: 100%;
    margin-right: 10px;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    
  
    .rose-chart-title {
      height: 50px;
      font-weight: bold;
      text-indent: 20px;
      font-size: 20px;
      display: flex;
      align-items: center;
    }
  
    .dv-charts-container {
      height: calc(~"100% - 50px");
    }
    .pie{
      margin-top: 0px;
    }
  }
  </style>
  